<template>
  <div>
    <div
      @click="enterDetails(mGoods.id)"
      class="goods-list"
      v-for="(mGoods, index) in tabMain"
      :key="mGoods.id"
      v-show="currentIndex == index"
    >
      <div class="mGoods-img">
        <img :src="mGoods.image" alt="" style="height: 195px; width: 195px" />
      </div>
      <div class="mGoods-img1">
        <img :src="mGoods.image1" alt="" style="height: 20px" />
      </div>
      <div class="mGoods-desc">
        {{ mGoods.desc }}
      </div>
      <div class="mGoods-price">
        {{ mGoods.price }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabMain: [
        {
          id: "1",
          image: require("../img/mantianxingwatch.png"),
          image1: require("../img/upmember.png"),
          desc: "阿玛尼 满天星系列石英女表",
          price: "￥3299起",
          goodsType: "ll",
        },
        {
          id: "2",
          image: require("../img/redwatch.png"),
          image1: require("../img/upmember.png"),
          desc: "连尼亚粉色施华洛世奇水晶渐变...",
          price: "￥4699起",
          goodsType: "tt",
        },
        {
          id: "3",
          image: require("../img/starwatch.png"),
          image1: require("../img/upmember.png"),
          desc: "连尼亚满天星系列 法国进口 轻...",
          price: "￥3699起",
          goodsType: "xx",
        },
        {
          id: "4",
          image: require("../img/greenwatch.png"),
          image1: require("../img/upmember.png"),
          desc: "玺佳R系列丹麦玫瑰手表ins风时...",
          price: "￥2999起",
          goodsType: "yy",
        },
      ],
    };
  },
  props: {
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    enterDetails(id) {
      this.$router.push({ path: "./goodsdetails", query: { id } });
    },
  },
};
</script>

<style src="../css/shoppingMall.css" scoped>
</style>